\section{JSF}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{Frameworks}
\begin{frame}
  \frametitle{Frameworks MVC para desenvolvimento Java Web}
  \begin{itemize}
    \item Existem muitas tarefas implementadas em uma aplicação de podem ser
    automatizadas
    \begin{itemize}
      \item Validação de entradas do usuário
      \item Conversão de tipos
      \item Tratamento de erros
      \item Componentes de apresentação
    \end{itemize}
    \item O uso de frameworks simplifica a implementação dessas tarefas
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Frameworks existentes}
  \begin{itemize}
    \item Alguns dos frameworks mais conhecidos são
    \begin{itemize}
      \item Struts I e II: http://struts.apache.org/
      \item Stripes: http://www.stripesframework.org/
      \item JBoss Seam: http://www.seamframework.org/
      \item Tapestry: http://tapestry.apache.org/
      \item Spring WebFlow: http://www.springsource.org/webflow
    \end{itemize}
    \item O JSF será apresentado nesse curso por ser o framework padrão da
    plataforma JEE
  \end{itemize}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{JSF: Introdução}
\begin{frame}
  \frametitle{MVC no JSF}
  \begin{itemize}
    \item Com JSF, os componentes do MVC são implementados como:
    \begin{itemize}
      \item Model: Javabeans / JPA
      \item View: JSP's com tags do JSF
      \item Controller: JSF {\it backing-beans}
    \end{itemize}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Configurando o ambiente para uso do JSF}
  \begin{itemize}
    \item O JSF é distribuído com o JBoss, mas não faz parte da sua biblioteca
    padrão. Adicione a biblioteca ao eclipse:
    \begin{itemize}
      \item Vá em $Window \rightarrow Preferences$
      \item Vá em $Java \rightarrow Build~Path \rightarrow User~Libraries$
      \item Clique em $New$, dê um nome (e.g. $JBOSS-JSF$)
      \item Clique em $Add~JARs$
      \item Abra o diretório 
      ``JBOSS/server/default/deploy/jbossweb.sar/jsf-libs''
      \item Escolha todos os JAR's e clique em $Open$. Clique em $Ok$ 
    \end{itemize}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Criando uma aplicação JSF}
  \begin{itemize}
    \item Crie um novo projeto Web:
    \begin{itemize}
      \item Vá em $new \rightarrow project \rightarrow Dynamic~Web~Project$. Dê
      um nome ao projeto, e em $Configuration$, escolha $JavaServer~Faces~v1.2~
      project$. Clique em $next$ nas opções padrão do projeto java e web.
      \item Na tela ``JSF Capabilities'', em ``JSF Implementation Libraries''
      escolha ``User Library'' e marque o $JBOSS-JSF$ criado anteriormente.
      Clique em $Finish$.
    \end{itemize}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Estrutura da aplicação JSF}
  \begin{itemize}
    \item Abra o arquivo $web.xml$:
    \begin{itemize}
      \item Quando trabalhamos com servlets, mapeamos os servlets um a um no
      web.xml
      \item No faces temos apenas um mapeamento: $/faces/*$. O * no final
      indica que todas as URL's que iniciam com $/faces$ serão interceptadas
      pelo servlet do faces, e.g.:
      \begin{itemize}
        \item /faces/Abc
        \item /faces/Def
        \item \ldots
      \end{itemize}
    \end{itemize}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Estrutura da aplicação JSF}
  \begin{itemize}
    \item É criado também o arquivo $faces-config.xml$:
    \begin{itemize}
      \item Quando é aberto, o eclipse disponibiliza várias abas com wizards
      \begin{itemize}
        \item O conteúdo pode ser visto na aba $Source$
      \end{itemize}
      \item Os $controllers$ (i.e. {\it backing-beans}) são criados na aba
      ``Managed Bean''
      \item Os fluxos de tela são definidos na aba ``Navigation Rule'' 
    \end{itemize}
  \end{itemize}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{JSF: Fluxo de tela simples}
\begin{frame}[fragile]
  \frametitle{Criando as páginas}
  \begin{itemize}
    \item Em $WebContent$, crie duas JSP's: $menu.jsp$ e $teste.jsp$ 
    \begin{itemize}
      \item $menu.jsp$ será um menu simples do sistema
    \end{itemize}
    \item Em todas as páginas, importe as taglibs do faces: 
  \begin{verbatim}
<%@ taglib 
    prefix="h" 
    uri="http://java.sun.com/jsf/html" %>
<%@ taglib 
    prefix="f" 
    uri="http://java.sun.com/jsf/core" %>
  \end{verbatim}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Definindo o Backing Bean}
  \begin{itemize}
    \item Para criar o $backing~bean$ abra o $faces-config.xml$ na aba
    $Managed~Bean$. Clique no botão $Add$:
    \begin{itemize}
      \item Escolha ``$Create~a~new~Java~class$'', clique em $next$
      \item Dê um nome à classe (e.g. $TesteBB$) e coloque-a no pacote
      $projeto.bb$. Clique em $next$.
      \item Em $Scope$ é definido o escopo (requisição, seção, aplicação) em que
      o $backing~bean$ será alocado. Em $Name$ é definido o nome pelo qual ele é
      referenciado nas JSP's. Clique em $next$.
      \item É exibido um sumário da classe a ser criada. Clique em $Finish$.
      \begin{itemize}
        \item Abra a classe criada. Verifique que trata-se de uma classe java
        simples, diferentemente de um servlet
      \end{itemize}
    \end{itemize}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Mapeando o fluxo de tela}
  \begin{itemize}
    \item Abra o $faces-config.xml$ na aba $Navigation~Rule$:
    \begin{itemize}
      \item Arraste as duas JSP's para o grid
      \item Selecione a opção ``Link'' e crie uma ligação de $menu$ para $teste$
      \item No link criado, clique com o botão direito e vá em $Show~View
      \rightarrow Properties$. Em $From~Outcome$, coloque o nome $toTeste$
    \end{itemize}
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Implementando o Backing Bean}
  \begin{itemize}
    \item Abra a classe $TesteBB$
    \item Defina um método para início do fluxo
    \begin{itemize}
      \item O método não deve receber nenhum parâmetro
      \item Deve retornar uma string (com o $From~Outcome$ definido no fluxo de
      páginas)
    \end{itemize}
  \begin{verbatim}
public String inicio() {
    System.out.println("TesteBB.inicio()...");
    return "toTeste";
}
  \end{verbatim}
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Implementando as JSP's}
  \begin{itemize}
    \item Em $teste.jsp$ coloque apenas uma mensagem no corpo da página.
    \item Crie um link em $menu.jsp$
    \begin{itemize}
      \item $f:view$: Tag que deve englobar as tags do JSF
      \item $h:form$: Gera o $<form>$ html
      \item $h:commandLink$: Gera o $<href>$ html
    \end{itemize}
  \begin{verbatim}
<f:view>
  <h:form>
    <h:commandLink
        value="Teste" immediate="true" 
        action="#{testeBB.inicio}" />
  </h:form>
</f:view>
  \end{verbatim}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Testando a aplicação}
  \begin{itemize}
    \item Adicione a aplicação ao servidor e inicie-o
    \item Acesse a URL:
    \begin{itemize}
      \item $http://localhost:8080/TestFaces/faces/menu.jsp$
    \end{itemize}
    \item Clique no link e verifique o log da aplicação
  \end{itemize}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{JSF: Formulário}
\begin{frame}[fragile]
  \frametitle{Formulário no Backing Bean}
  \begin{itemize}
    \item No {\it Backing Bean} os campos do formulário são atributos da classe.
    \begin{itemize}
      \item Crie os seguintes campos (além dos getters e setters):
    \end{itemize}
  \begin{verbatim}
private String texto;
private Integer numeroInteiro;
private Double numeroFracionario;
private Date data;
  \end{verbatim}
    \item Crie também os métodos de ação $cancelar$ e $salvar$. Em $salvar$
    imprima os valores dos campos.
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Formulário na JSP}
  \begin{itemize}
    \item Descreva o form na $teste.jsp$:
  \begin{verbatim}
<f:view locale="pt_BR">
  <h:form>
    <h:messages /><br />
    Campo Texto: <h:inputText
                    value="#{testeBB.texto}" /><br />
    <h:commandButton
       value="Salvar"
       action="#{testeBB.salvar}" />
  </h:form>
</f:view>
  \end{verbatim}
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Tags do form}
  \begin{itemize}
    \item As tags do slide anterior tem as seguintes funções:
    \begin{itemize}
      \item $h:messages$: Imprime as mensagens de validação
      \item $h:inputText$: Define um campo texto
      \item $h:commandButton$: Gera um botão que chama a ação de salvar
    \end{itemize}
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Campos adicionais}
  \begin{itemize}
    \item Definindo um campo numérico e obrigatório:
  \begin{verbatim}
Número Inteiro:
<h:inputText
    required="true" 
    requiredMessage="Número é obrigatório"
    converterMessage="Digite um número válido"
    value="#{testeBB.numeroInteiro}" /><br />
  \end{verbatim}
    \item As conversões e validações de tipo são feitas automaticamente
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Campos adicionais}
  \begin{itemize}
    \item Adicionando um campo decimal
  \begin{verbatim}
Número Decimal:		
<h:inputText
    converterMessage="Número Decimal inválido"
    value="#{testeBB.numeroFracionario}">
      <f:convertNumber 
          maxFractionDigits="2" 
          minFractionDigits="2"/>
</h:inputText><br />
  \end{verbatim}
    \item As conversões, validações de tipo e re-impressões são feitas
    automaticamente
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Campos adicionais}
  \begin{itemize}
    \item Adicionando um campo de data
  \begin{verbatim}
Data:
<h:inputText
    converterMessage="Digite uma data válida" 
    value="#{testeBB.data}">
      <f:convertDateTime type="date" dateStyle="medium" />
</h:inputText><br />
  \end{verbatim}
    \item As conversões, validações de tipo e re-impressões são feitas
    automaticamente. $dateStyle="medium"$ segue o pattern $dd/MM/yyyy$ no
    locale utilizado
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{Campos adicionais}
  \begin{itemize}
    \item Botão cancelar:
  \begin{verbatim}
<h:commandButton
    value="Cancelar"
    immediate="true"
    action="#{testeBB.cancelar}" />
  \end{verbatim}
    \item Com $immediate="true"$ as validações não são chamadas. Lembre de
    criar uma $Navigation Rule$ para o cancelar mandando de volta para o menu
  \end{itemize}
\end{frame}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{JSF: Data Table}
\begin{frame}[fragile]
  \frametitle{JSF: Data Table}
  \begin{itemize}
    \item O data table do JSF permite definir uma listagem (tabela)
    \begin{itemize}
      \item Crie o método listar no {\it Backing Bean} (e também um link no
      menu):
    \end{itemize}
  \begin{verbatim}
@PersistenceUnit
EntityManagerFactory emf;
private List resultList;

public String listar() {
    EntityManager em = emf.createEntityManager();
    em.getTransaction().begin();
    Query query = em.createQuery(
                "select pessoa from Pessoa pessoa");
    resultList = query.getResultList();
    em.getTransaction().commit();
    return "toList";
}
  \end{verbatim}
  \end{itemize}
\end{frame}

\begin{frame}[fragile]
  \frametitle{JSF: Data Table}
  \begin{itemize}
    \item Defina a JSP $listar.jsp$:
  \begin{verbatim}
<f:view locale="pt_BR">
  <h:form>
    <h:dataTable var="pessoa"
       value="#{testeBB.resultList}" >
      <h:column>
        <f:facet name="header">RG</f:facet>
        <h:outputText value="#{pessoa.rg}" />
      </h:column>
      <h:column>
        <f:facet name="header">Nome</f:facet>
        <h:outputText value="#{pessoa.nome}" />
      </h:column>
    </h:dataTable>
  </h:form>
</f:view>
  \end{verbatim}
  \end{itemize}
\end{frame}
